<template>
  <div class="app-h101">
    <el-form class="test_height_form" :inline="true" label-width="100px" style="margin: 6px 0 0 0">
      <el-form-item label="客户订单号">
        <el-input v-model="page.condition.customerOrderNo" placeholder="请输入内容" style="width: 184px"></el-input>
      </el-form-item>
      <el-form-item label="中联订单号">
        <el-input v-model="page.condition.sysOrderNo" placeholder="请输入内容" style="width: 184px"></el-input>
      </el-form-item>
      <el-form-item label="车架号">
        <el-input v-model="page.condition.vin" placeholder="请输入内容" style="width: 184px"></el-input>
      </el-form-item>

      <el-form-item label="客户名称">
        <el-select v-model="page.condition.customerNo"  placeholder="请选择" style="width: 184px">
          <el-option
            v-for="item in customerNameSelect.options"
            :key="item.code"
            :label="item.sname"
            :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运输方式">
        <el-select v-model="page.condition.transportType" placeholder="运输方式" style="width: 184px">
          <el-option
            v-for="(item,index) in transportTypeSelect.options"
            :key="index"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="page.condition.orderStatus" placeholder="订单状态" style="width: 184px">
          <!--<el-option v-for ='(item,index) in Lists.orderStatus' :key="index" :label="item.label" :value="item.value"></el-option>-->
          <el-option :key="1" label="未离昌" value="未离昌"></el-option>
          <el-option :key="2" label="在途" value="在途"></el-option>
          <el-option :key="3" label="交付" value="交付"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="收车省份">
        <el-input v-model="page.condition.dProvince" placeholder="请输入内容" style="width: 184px"></el-input>
      </el-form-item>
      <el-form-item label="收车城市">
        <el-input v-model="page.condition.dCity" placeholder="请输入内容" style="width: 184px"></el-input>
      </el-form-item>
      <el-form-item label="车牌号">
        <el-input v-model="page.condition.licensePlate" placeholder="请输入内容" style="width: 184px"></el-input>
      </el-form-item>

      <el-form-item label="承运车队">
        <el-select v-model="page.condition.supplier"  placeholder="请选择" @focus="getSupplier" style="width: 184px">
          <el-option
            v-for="(item,index) in supplierList"
            :key="index"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="经销商">
        <el-select v-model="page.condition.dealerName"  placeholder="请选择"  style="width: 184px">
          <el-option
            v-for="(item,index) in dealerNameSelect.options"
            :key="index"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="接单时间">
        <el-date-picker
          style="width: 184px"
          v-model="page.condition.startOrderTime"
          type="date"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期">
        </el-date-picker>
        <span>-</span>
        <el-date-picker
          style="width: 184px"
          v-model="page.condition.endOrderTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="打单时间">
        <el-date-picker
          style="width: 184px"
          v-model="page.condition.startPrintOrderTime"
          type="date"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期">
        </el-date-picker>
        <span>-</span>
        <el-date-picker
          style="width: 184px"
          v-model="page.condition.endPrintOrderTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="送达时间">
        <el-date-picker
          style="width: 184px"
          v-model="page.condition.startReturnOrderTime"
          type="date"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期">
        </el-date-picker>
        <span>-</span>
        <el-date-picker
          v-model="page.condition.endReturnOrderTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 184px"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>

      <el-row>
        <el-col :span="24" style="padding-left:10px;padding-bottom:10px;">
         <el-button type="primary" :disabled='searchdisabled' @click="search">查询</el-button>
         <el-button type="primary" @click="resetSearch">重置</el-button>
         <el-button type="primary" @click="exportClick" >导出</el-button>
         <!-- // http://10.2.7.91/excel/getExcel -->
         <a :href="getExeclUrl" v-show="false" ></a>
        </el-col>
      </el-row>
    </el-form>

    <div style="width: 100%;position: relative;">
      <v-loading v-show="tableloading"></v-loading>
      <el-table
        :data="dataServer"
        border element-loading-text="正在加载中..." v-loading="false"
        style="margin: 0 4px;" :height="table_height" v-if="tableFlag">
        <el-table-column v-for="(item,index) in tableContent"
          :prop="item.prop  "
          :label="item.label"
          :formatter="dateFormat"
          :key="index"
          :width="item.width">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      style="margin-top: 8px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.current"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
    <el-dialog title="在途跟踪详情" :visible.sync="dialogVisible" width="70%" >
      <kas-edit :modify_info_data="modify_info_data"></kas-edit>
    </el-dialog>


  </div>
</template>

<script type="text/javascript">
  import kasEdit from './layer/simpleEdit'
  import Area from '^/data/area/index.js'
  import * as orderAPI from '@/api/order'
  import { formatDate } from '@/utils/date.js'
  import { bus } from '@/utils/bus.js'
  import Loading from '@/components/loading/loading.vue'
  export default {
    name: 'orderMgt',
    components: { kasEdit, 'v-loading': Loading },
    data() {
      return {
        name: '订单查询',
        currentPage4: 4,
        dialogVisible: false,
        tableFlag: true,
        edit_layer_data: '',
        modify_info_data: '',
        table_height: 0,
        dataServer: [],
        supplierList: [],
        page: {
          current: 1,
          size: 10,
          total: 1,
          condition: {
            startPrintOrderTime: '',
            endPrintOrderTime: '',
            startReturnOrderTime: '',
            endReturnOrderTime: '',
            sysOrderNo: '',
            customerOrderNo: '',
            customerNo: '',
            vin: '',
            orderCreateTime: '',
            startOrderTime: '',
            endOrderTime: '',
            dProvince: '',
            dAddress: '',
            dCity: '',
            orderStatus: '',
            transportType: '',
            licensePlate: '',
            supplier: '',
            dealerName: ''
          }
        },
        tableContent: [
          { prop: 'sysOrderNo', label: '中联订单号', width: '140', fixed: '' },
          { prop: 'customerOrderNo', label: '客户订单号', width: '200', fixed: '' },
          { prop: 'customerName', label: '客户名称', width: '140', fixed: '' },
          { prop: 'orderDate', label: '订单日期', width: '140', fixed: '' },
          { prop: 'vin', label: '车架号', width: '200', fixed: '' },
          { prop: 'styleCode', label: '车型代码', width: '200', fixed: '' },
          { prop: 'styleName', label: '车型名称', width: '360', fixed: '' },
          { prop: 'dealerName', label: '经销商名称', width: '240', fixed: '' },
          { prop: 'oProvince', label: '收车省', width: '60', fixed: '' },
          { prop: 'oCity', label: '发车市', width: '60', fixed: '' },
          { prop: 'oAddress', label: '发车地址', width: '300', fixed: '' },
          { prop: 'dProvince', label: '收车省', width: '60', fixed: '' },
          { prop: 'dCity', label: '收车市', width: '60', fixed: '' },
          { prop: 'dAddress', label: '收车地址', width: '300', fixed: '' },
          { prop: 'distance', label: '运输距离(km)', width: '100', fixed: '' },
          { prop: 'orderStatus', label: '订单状态', width: '120', fixed: '' },
          { prop: 'transportType', label: '运输方式', width: '140', fixed: '' },
          { prop: 'orderCreateTime', label: '接单时间', width: '140', fixed: '' },
          { prop: 'pickTime', label: '提车时间', width: '140', fixed: '' },
          { prop: 'printOrderTime', label: '打单时间', width: '140', fixed: '' },
          { prop: 'inboundTime', label: '入中联库时间', width: '140', fixed: '' },
          { prop: 'arrangeCapacityTime', label: '安排运力时间', width: '140', fixed: '' },
          { prop: 'outboundTime', label: '出中联库时间', width: '140', fixed: '' },
          { prop: 'enterRailwayTime', label: '入铁路库时间', width: '140', fixed: '' },
          { prop: 'loadTime', label: '装车时间', width: '140', fixed: '' },
          { prop: 'leaveTime', label: '离昌时间', width: '140', fixed: '' },
          { prop: 'supplier', label: '承运车队', width: '220', fixed: '' },
          { prop: 'driverPhone', label: '司机联系方式', width: '160', fixed: '' },
          { prop: 'licensePlate', label: '车牌号', width: '100', fixed: '' },
          { prop: 'planShiptoTime', label: '预计送达时间', width: '140', fixed: '' },
          { prop: 'shiptoTime', label: '送达时间', width: '140', fixed: '' },
          { prop: 'returnOrderTime', label: '回单时间', width: '140', fixed: '' },
          { prop: 'shipmentType', label: '发运类型', width: '100', fixed: '' },
          { prop: 'newestPosition', label: '最新在途位置', width: '360', fixed: '' },
          { prop: 'newestTime', label: '最新在途时间', width: '140', fixed: '' },
          { prop: 'recordCount', label: '在途记录数', width: '100', fixed: '' },
          { prop: 'remark', label: '备注', width: '200', fixed: '' },
          { prop: 'remarkDesc', label: '备注说明', width: '200', fixed: '' },
          { prop: 'way', label: '数据源', width: '140', fixed: '' }
        ],
        areaData: Area,
        getExeclUrl: '#',
        customerNameSelect: {
          selectValue: '',
          options: []
        },
        transportTypeSelect: {
          selectValue: '',
          options: []
        },
        dealerNameSelect: {
          selectValue: '',
          options: []
        },
        tableloading: false,
        searchdisabled: false
      }
    },
    created() {
      const that = this
      that.getList()
      bus.$on('before-close', (text) => {
        // console.log('text', text)
        that.dialogVisible = text
        if (!text) {
          // console.log('编辑完成 点确定关闭后 重新请求 列表内数据')
          that.getList()
        }
      })
      that.getSelectInfo()
    },
    mounted() {
      const that = this
      // const f_h = (document.getElementsByClassName('test_height_form')[0]).offsetHeight
      // const app_h = (document.getElementsByClassName('app-h101')[0]).offsetHeight
      const q_h = (document.getElementsByClassName('sidebar-container')[0]).offsetHeight
      const cha = q_h - 360 - 115
      // let cha = q_h - 250 - 245
      // if (q_h > 800) {
      //   cha = 390
      // } else {
      //   cha = q_h - 250 - 150
      // }
      that.table_height = cha
      // console.log('table', that.table_height, 'q_h', q_h)
    },
    methods: {
      getList(page) {
        const that = this
        that.tableloading = true
        orderAPI.queryPage(page).then(res => {
          // console.log(res.data.records)
          that.dataServer = res.data.records
          that.page.current = res.data.current
          that.page.size = res.data.size
          that.page.total = res.data.total
          that.tableFlag = false
          that.tableFlag = true

          that.tableloading = false
          that.searchdisabled = false
        }).catch(res => {
          console.warn('error', res)
          that.tableloading = false
          that.searchdisabled = false
        })
      },
      // 获取承运人
      getSupplier() {
        const that = this
        orderAPI.getSupplier().then(res => {
          if (res.code === 0) {
            that.supplierList = res.data
          }
        })
      },
      search() {
        this.page.current = 1
        this.searchdisabled = true
        console.log('search-this.page', this.page.condition)
        this.getList(this.page)
      },
      resetSearch() {
        this.page.current = 1
        this.page.size = 10
        this.page.condition = {
          startPrintOrderTime: '',
          endPrintOrderTime: '',
          startReturnOrderTime: '',
          endReturnOrderTime: '',
          sysOrderNo: '',
          customerOrderNo: '',
          customerNo: '',
          vin: '',
          orderCreateTime: '',
          startOrderTime: '',
          endOrderTime: '',
          dProvince: '',
          dCity: '',
          dAddress: '',
          orderStatus: '',
          transportType: '',
          licensePlate: '',
          dealerName: ''
        }
        this.getList(this.page)
      },
      handleSizeChange(val) {
        this.page.size = val
        this.page.current = 1
        this.getList(this.page)
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        this.page.current = val
        this.getList(this.page)
        console.log(`当前页: ${val}`)
      },
      handleClick(data) {
        const that = this
        orderAPI.findModifyInfo(data.id).then(res => {
          that.modify_info_data = res.data
          console.log('modify_info_data', this.modify_info_data)
          this.dialogVisible = true
        }).catch(res => {
          console.warn('error', res)
        })
      },
      handleClose() {
        console.log('close')
        this.dialogVisible = false
      },
      exportClick() {
        const BASE_API = process.env.BASE_API
        // const url = 'http://10.2.7.91/excel/getExcel'
        const params = this.page.condition
        console.log('BASE_API', BASE_API, 'params', params)
        this.formatUrl(BASE_API, params)
      },
      formatUrl(url, params) {
        const that = this
        let wUrl = ''
        let cUrl = ''
        let itemStr = ''
        for (const i in params) {
          if (params[i] !== '') {
            itemStr = [i] + '=' + params[i]
            itemStr = itemStr + '&'
            wUrl += itemStr
          }
        }
        // 清除末尾 多余的 '&'
        const reg = /&$/gi
        cUrl = wUrl.replace(reg, '')
        that.getExeclUrl = url + '/excel/getExcel' + '?' + cUrl
        // console.log('that.getExeclUrl', that.getExeclUrl, 'wUrl', wUrl, 'cUrl', cUrl)
        const myA = document.createElement('a')
        myA.href = that.getExeclUrl
        myA.click()
      },
      getSelectInfo() {
        const that = this
        // 获取查询项
        if (that.customerNameSelect.options.length === 0) {
          // 获取客户名称
          orderAPI.findCustomerName().then((res) => {
            if (res.code === 0) {
              that.customerNameSelect.options = res.data
            }
          }).catch((res) => {
            console.warn('error', res)
          })
        }
        // 运输方式
        if (that.transportTypeSelect.options.length === 0) {
          orderAPI.findTransportType().then((res) => {
            if (res.code === 0) {
              // console.log('findTransportType', res.data)
              that.transportTypeSelect.options = res.data
            }
          }).catch((res) => {
            console.warn('error', res)
          })
        }
        // 获取经销商
        if (that.dealerNameSelect.options.length === 0) {
          orderAPI.findDealerName().then(res => {
            if (res.code === 0) {
              that.dealerNameSelect.options = res.data
            }
          }).catch((res) => {
            console.warn('error', res)
          })
        }
      },
      dateFormat(row, column) {
        const str = row[column.property]
        let newStr
        let pStr
        if (str !== undefined) {
          pStr = str * 1
          const r1 = /^\+?[1-9][0-9]*$/
          const r2 = /^\d{13}$/
          if (r1.test(pStr) && r2.test(pStr)) {
            // console.log('这是13位时间戳')
            const date = new Date(str)
            // newStr = formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            newStr = formatDate(date, 'yyyy-MM-dd')
          } else {
            newStr = str
          }
        }
        // console.log('newStr', newStr)
        return newStr
      }
    }
  }
</script>

<style type="text/css">
</style>
